<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-13 20:24:45
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-14 17:13:40
-->
<template>
  <div class="body">
  <div id="app">
  <div class="divLeft">
      <p>用户登录</p>
  </div>
  <div class="divRight">
      <p>没有账号？<a href="">立即注册</a></p>
  </div>
  <div class="divCenter">
      <div class="divFrom">
          <from action="#" method="post">
              <table>
                  <tr>
                      <td class="tdLeft">
                          <lable class="" for="username">
                              用户名
                          </lable>
                      </td>
                      <td class="tdRight">
                          <input type="text" v-model="username" id="username" placeholder="请输入用户名">
                      </td>
                  </tr>
                  <tr>
                      <td class="tdLeft">
                          <label class="" for="password">
                              密码
                          </label>
                      </td>
                      <td class="tdRight">
                          <input type="password" v-model="password" id="password" placeholder="请输入密码">
                      </td>
                  </tr>
                  <tr>
                      <td class="tdLeft">
                          <label class="" for="checkCode">
                              验证码
                          </label>
                      </td>
                      <td class="tdRight">
                          <input type="text" v-model="checkCode" id="checkCode" placeholder="请输入验证码">
                          <img id="imgCode"src="../components/img/verify_code.jpg" alt="">
                      </td>
                  </tr>
                  <tr>
                      <td @click="login" id="tdSubmit" colspan="2">
                          <input id="btnSubmit" type="submit" value="登录">
                      </td>
                  </tr>
              </table>
          </from>
      </div>
  </div>
 </div>
</div>
</template>
<script setup>
function login(){
// alert("正在登录...");
if(username.value=="admin" && password.value=="123"){
  alert("登陆成功");
}else{
  alert("用户名或密码错误");
}
}
</script>
<style scoped>
  .body{
      padding-top:40px;
      background-image:url(../components/img/login_bg.png);
      background-position:center;
      background-repeat: no-repeat;
  }
  #app{
      /* border:1px solid red; */
      width:900px;
      height:600px;
      border:5px solid #eee;
      /* 让div水平居中 */
      margin:auto;
      background-color: white;
  }
  .divLeft{
      float:left;
      width:25%;
      padding-top:20px;
      padding-left: 20px;
  }
  .divLeft>p:first-child{
      color: #ffd026;
      font-size: 20px;
  }
  .divLeft>p:last-child{
      color: #a6a6a6;
      font-size: 20px;
      /* font-weight: bold; */
  }
  .divCenter{
      float:left;
      /* 这里减去的值是左右宽度 */
      width:calc(100% - 25% - 25%);
      padding-top: 150px;
  }
  table{
      color:#a6a6a6;
  }
  .tdLeft{
      width: 150px;
      height: 45px;
      text-align: right;
      padding-right: 45px;
  }
  .divRight{
      float:right;
      width:25%;
      padding-top: 20px;
      padding-right: 20px;
  }
  .divRight>p{
      font-size: 15px;
      color: #a6a6a6;
      text-align: right;
  }
  .divRight p a{
      color: pink;
  }
  /* 单独设置验证码图片 */
  #imgCode{
      height:32px;
      /* 垂直居中 */
      vertical-align: middle;
  }
  /* 表单中放置提交按钮的td */
  #tdSubmit{
      text-align: center;
  }
  #btnSubmit{
      width: 115px;
      height: 30px;
      background-color: #ffd026;
      border: 0px ;
      color: #a6a6a6;
      border-radius: 5px;
  }
  #username,#password,#checkCode{
      width: 251px;
      height: 32px;
      border: 1px solid #a6a6a6;
      border-radius: 5px;
      padding-left: 10px;
  }
  #checkCode{
      width: 110px;
  }
  .btu {
  font-size: 15px;
  color: #a6a6a6;
  text-align: right;
  background-color: white;
  position: absolute;
  top: 85px;
  right: 265px;
  border: 0px;
}
</style>